<template>
  <div id="app">

    <div class="tab" id="tab">
      <tab-header ></tab-header>
      <div class="tab-content-box">
        <div class="tab-content" id="tab-content">

          <div class="content content1">1</div>
          <div class="content content2">2</div>

        </div>
      </div>
    </div>
    
  </div>
</template>

<script>
import TabHeader from './components/TabHeader.vue';


export default {
  name: 'App',
  components: {
    TabHeader
  },
  mounted() {

  },
  methods: {
    
  },
  data() {
    return {
     
    }
  }
}
</script>

<style>
  .tab {
    width: 100%;
    
    overflow: hidden;
  }
  .tab-content-box {
    
    position: relative;
    width: 100%;
    height: 500px;
  }
  .tab-content {
    display: flex;
    transition: .3s;
    position: absolute;
    left: 0;
    top: 0;
  }
  .content1 {
   
    flex-shrink: 0;
    width: 359px;
    height: 400px;
    background: darkcyan;
  }
  .content2 {
 
    flex-shrink: 0;
    width: 359px;
    height: 200px;
    background: salmon;
  }
</style>
